<%@ page contentType="text/html; charset=UTF-8anguage="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset=UTF-8meta name=viewport" content="width=device-width, initial-scale=10
    <title>编辑公告 - 应急防护小站</title>
    <link href=https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css rel=stylesheet>
    <link rel="stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6css/all.min.css">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667a 0%, #764ba2100);

        }
    </style>
</head>
<body class="bg-gray-50
    <!-- 导航栏 -->
    <nav class="gradient-bg text-white shadow-lg">
        <div class=container mx-auto px-6 py-4>
            <div class=flex items-center justify-between>
                <div class=flexitems-center space-x-3">
                    <i class=fasfa-shield-alt text-2xl"></i>
                    <h1 class=text-xl font-bold">应急防护小站</h1>
                    <span class="text-sm opacity-75">编辑公告</span>
                </div>
                <div class=flexitems-center space-x-4">
                    <a href="admin-announcement.jsp" class="hover:text-blue-200 transition-colors">
                        <i class=fas fa-arrow-left mr-2"></i>返回公告管理
                    </a>
                    <a href="logout" class="hover:text-red-200 transition-colors">
                        <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <div class=container mx-auto px-6 py-8
        <!-- 页面标题 -->
        <div class=mb-8       <h2ss="text-3ont-bold text-gray-800">编辑公告</h2>
            <p class=text-gray-600修改网站公告</p>
        </div>

        <!-- 编辑表单 -->
        <div class="bg-white rounded-lg shadow-md p-6
            <form action="announcement" method=post id="announcementForm>
                <input type="hidden" name="action value="update>
                <input type=hidden" name="id" value="${param.id}">
                
                <div class="grid grid-cols-1 gap-6">
                    <!-- 基本信息 -->
                    <div class=space-y-4">
                        <h3 class="text-lg font-semibold text-gray-800">基本信息</h3>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">公告标题</label>
                            <input type=text" name="title" value="${announcement.title}" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2ocus:ring-blue-500"
                                   placeholder="请输入公告标题">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">公告类型</label>
                            <select name="type class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2ocus:ring-blue-500">
                                <option value="notice" ${announcement.type == notice' ?selected: ''}>通知</option>
                                <option value="warning" ${announcement.type == 'warning' ?selected: ''}>警告</option>
                                <option value="info" ${announcement.type == info' ?selected: ''}>信息</option>
                                <option value="maintenance" ${announcement.type ==maintenance' ?selected: ''}>维护</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">公告内容</label>
                            <textarea name=content rows="8" required
                                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2ocus:ring-blue-500"
                                      placeholder="请输入公告内容">${announcement.content}</textarea>
                        </div>
                    </div>
                    
                    <!-- 发布设置 -->
                    <div class=space-y-4">
                        <h3 class="text-lg font-semibold text-gray-800">发布设置</h3>
                        
                        <div class=grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">发布状态</label>
                                <select name="status class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2ocus:ring-blue-500">
                                    <option value=draft" ${announcement.status == draft ? selected: ''}>草稿</option>
                                    <option value="published" ${announcement.status == 'published' ? selected' :                   <option value="archived" ${announcement.status == 'archived' ? selected' :                   </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-70mb-2">优先级</label>
                                <select name=priority class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2ocus:ring-blue-500">
                                    <option value="low ${announcement.priority == low? selected' : ''}>低</option>
                                    <option value=normal ${announcement.priority == normal' ?selected: ''}>普通</option>
                                    <option value="high ${announcement.priority == high? selected' : ''}>高</option>
                                    <option value=urgent ${announcement.priority == urgent' ?selected: ''}>紧急</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class=grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">开始时间</label>
                                <input type="datetime-local name="startTime" value="${announcement.startTime}"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2ocus:ring-blue-500">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">结束时间</label>
                                <input type="datetime-local" name="endTime" value="${announcement.endTime}"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2ocus:ring-blue-500">
                            </div>
                        </div>
                        
                        <div class=flex items-center">
                            <input type=checkbox" name=isSticky" value="true" ${announcement.isSticky ? 'checked' : ''}
                                   class=h-4 w-4 text-blue-600ocus:ring-blue-50r-gray-300 rounded">
                            <label class="ml-2 block text-sm text-gray-900                   </div>
                        
                        <div class=flex items-center">
                            <input type="checkbox" name=sendNotification" value="true" ${announcement.sendNotification ? 'checked' : ''}
                                   class=h-4 w-4 text-blue-600ocus:ring-blue-50r-gray-300 rounded">
                            <label class="ml-2 block text-sm text-gray-900发送通知给所有用户</label>
                        </div>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class=mt-8 justify-end space-x-4">
                    <button type=button" onclick=window.location.href='admin-announcement.jsp'" 
                            class=px-6t-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 transition-colors">
                        取消
                    </button>
                    <button type=button" onclick=saveAsDraft()" 
                            class=px-6py-2 bg-yellow-500 text-white rounded-md hover:bg-yellow-600 transition-colors">
                        <i class="fas fa-save mr-2"></i>保存草稿
                    </button>
                    <button type="submit" 
                            class=px-62lue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
                        <i class="fas fa-paper-plane mr-2"></i>发布公告
                    </button>
                </div>
            </form>
        </div>
        
        <!-- 预览区域 -->
        <div class="mt-8g-white rounded-lg shadow-md p-6">         <h3 class="text-lg font-semibold text-gray-800">预览</h3>
            <div class=mt-4 p-4 border border-gray-200rounded-lg bg-gray-50
                <div class=flex items-center mb-3">
                    <i class=fas fa-bullhorn text-blue-500 mr-2"></i>
                    <h4 class=text-lg font-semibold text-gray-80id="previewTitle">公告标题</h4                </div>
                <div class=text-sm text-gray-600 mb-2">
                    <span class=bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xsid=previewType">通知</span>
                    <span class=bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs ml-2id=previewStatus">草稿</span>
                </div>
                <div class=text-gray-700" id="previewContent">公告内容将在这里显示...</div>
            </div>
        </div>
    </div>

    <script>
        // 实时预览
        document.querySelector(input[name="title"]').addEventListener('input', function() {
            document.getElementById('previewTitle').textContent = this.value || '公告标题';
        });
        
        document.querySelector(select[name="type"]').addEventListener(change', function() {
            const typeLabels =[object Object]
              notice,
               warning,
            info,
                maintenance': '维护'
            };
            document.getElementById('previewType').textContent = typeLabels[this.value] || 通知     });
        
        document.querySelector('select[name="status"]').addEventListener(change', function() {
            const statusLabels =[object Object]
             draft,
               published': '已发布,
                archived已归档'
            };
            document.getElementById('previewStatus').textContent = statusLabelsthis.value] || 草稿     });
        
        document.querySelector('textarea[name="content"]').addEventListener('input', function() {
            document.getElementById(previewContent').textContent = this.value ||公告内容将在这里显示...';
        });
        
        function saveAsDraft() {
            document.querySelector('select[name="status"]').value = 'draft';
            document.getElementById('announcementForm').submit();
        }
    </script>
</body>
</html>